<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<link rel="stylesheet" type="text/css" href="<%=basePath%>static/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="<%=basePath%>static/themes/icon.css">
	<script type="text/javascript" src="<%=basePath%>static/jquery-1.7.2.js"></script>
	<script type="text/javascript" src="<%=basePath%>static/jquery.easyui.min.js"></script>
	
	
	<script type="text/javascript">
     $(function(){
          $('.cs-navi-tab').click(function() {
				var $this = $(this);
				var href = $this.attr('src');
				var title = $this.text();
				addTab(title, href);
		  });
     });
     function addTab(title, url){
		  if ($('#tabs').tabs('exists', title)){
				$('#tabs').tabs('select', title);//选中并刷新
				var currTab = $('#tabs').tabs('getSelected');
				var url = $(currTab.panel('options').content).attr('src');
				if(url != undefined && currTab.panel('options').title != 'Home') {
					$('#tabs').tabs('update',{
						tab:currTab,
						options:{
							content:createFrame(url)
						}
					});
				}
		  } else {
				var content = createFrame(url);
				$('#tabs').tabs('add',{
					title:title,
					content:content,
					closable:true
				});
		  }
	      tabClose();
    }
    function createFrame(url) {
		var s = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
		return s;
    }
	function tabClose() {
		/*双击关闭TAB选项卡*/
		$(".tabs-inner").dblclick(function(){
			var subtitle = $(this).children(".tabs-closable").text();
			$('#tabs').tabs('close',subtitle);
		})
		/*为选项卡绑定右键*/
		$(".tabs-inner").bind('contextmenu',function(e){
			$('#mm').menu('show', {
				left: e.pageX,
				top: e.pageY
			});
	
			var subtitle =$(this).children(".tabs-closable").text();
	
			$('#mm').data("currtab",subtitle);
			$('#tabs').tabs('select',subtitle);
			return false;
		});
	}		
  </script>
	
	
	
  </head>
  
  <body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
	<div data-options="region:'west',split:true,title:'West'" style="width:250px;">
		<div class="easyui-accordion" data-options="fit:true,border:false">
				<div title="Title1" data-options="selected:true" style="padding:10px;">
					<a href="javascript:void(0);" src="<%=basePath %>show4.jsp" class="cs-navi-tab">用户管理</a>
				</div>
				<div title="Title2" style="padding:10px;">
					content2
				</div>
				<div title="Title3" style="padding:10px">
					content3
				</div>
			</div>
	</div>

	<div data-options="region:'center',title:'Center'">
		
		<div id="tabs" class="easyui-tabs"  fit="true" border="false" >
                <div title="Home">
				<div class="cs-home-remark">
				    <center>
					    <p><h1>蜗牛,爬呀爬呀.................................</h1> 
					</center>
				</div>
				</div>
        </div>
	
	</div>
	
	
	
	<!-- 选项卡-右击事件 -->
	<div id="mm" class="easyui-menu cs-tab-menu">
		<div id="mm-tabupdate">刷新</div>
		<div class="menu-sep"></div>
		<div id="mm-tabclose">关闭</div>
		<div id="mm-tabcloseother">关闭其他</div>
		<div id="mm-tabcloseall">关闭全部</div>
	</div>
  </body>
</html>
